<template>
    <div class="page-header">
        <div class="left-back" v-if="showBack" @click="$router.back()">
            <span class="iconfont iconfanhui"></span>
            返回
        </div>
        <div>
            {{title}}
        </div>
        <div class="right-menu">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: "PageHeader",
        props:{
            title:{
                type:String,
                default:"点餐系统"
            },
            showBack:{
                type:Boolean,
                default:false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .page-header {
        width: 100%;
        height: 50px;
        @include flexbox(row,center,center);
        background-color: $primaryColor;
        color: white;
        position: relative;
        font-size: 20px;
        .left-back {
            position: absolute;
            font-size: 16px;
            left: 10px;
            @include flexbox(row,center,center);
            >span{
                font-size: 18px;
            }
        }
        .right-menu{
            @extend .left-back;
            left: unset;
            right: 10px;
            .iconfont{
                font-size: 24px;
            }
        }
    }
</style>